<!-- 帖子展示 -->
<template>
  <div>
    <main class="bg-grey pb-30" v-loading="blogOp">

      <div>
        <div class="entry-header entry-header-style-2 pb-80 pt-80 mb-50 text-white"
          :style="{ backgroundImage: 'url(' + background + ')' }">
          <div class="container entry-header-content">
            <h1 class="entry-title mb-50 font-weight-900">
              {{message.data}}
            </h1>
            <div class="entry-meta align-items-center meta-2 font-small color-white">
              <!-- <p class="mb-5 text-white"> -->
              <a href="javascript:void(0)" class="author-avatar" @click="$commons.toWindodAuthor(message.userid)"
                style="white-space:nowrap;">
                <img class="img-circle" :src="message.avatar" alt="">
              </a>
              <a href="javascript:void(0)" @click="$commons.toWindodAuthor(message.userid)" style="white-space:nowrap;">
                <span class="author-name font-weight-bold text-white">写给你的&nbsp;</span>
              </a>
              <span class="has-dot mr-10 text-white"> {{$commons.dateStr(message.timestamp)}} 更新</span>
              <span class="has-dot mr-10 text-white"> {{pretime}} 分钟阅读</span>
              <span class="has-dot text-white"> 博客推送</span>
              <!-- </p> -->
            </div>

          </div>

        </div>
      </div>



      <div class="entry-wraper mb-50">
        <div v-highlightjs>
        </div>
        <div class="ql-editor noy" style="" v-html="message.html" v-hljs></div>
      </div>
      <!-- 文章底部 -->
      <div class="container">
        <div class="entry-bottom mt-50 mb-30 wow fadeIn animated">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="tags">
                <span>标签: </span>

                <a href="javascript:void(0)" @click="$commons.toSearch('推送')" rel="tag">推送</a>

              </div>
            </el-col>
            <el-col :span="12">
              <span class="hit-count mr-15 float-right"><i class="elegant-icon icon_comment_alt mr-5"></i>0 条评论</span>
            </el-col>
          </el-row>

        </div>
        <!-- <div class="single-social-share clearfix wow fadeIn animated">
          <div class="entry-meta meta-1 font-small color-grey float-left mt-10">
            <span class="hit-count mr-15"><i class="elegant-icon icon_comment_alt mr-5"></i>182 comments</span>
            <span class="hit-count mr-15"><i class="elegant-icon icon_like mr-5"></i>268 likes</span>
            <span class="hit-count"><i class="elegant-icon icon_star-half_alt mr-5"></i>Rate: 9/10</span>
          </div>
        </div> -->
        <!--More posts-->
      </div>

    </main>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';

  import KyComments from '@/components/module/ky-comments'
  import offence from './offence.vue'
  let Base64 = require('js-base64').Base64
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      KyComments,
      offence
    },
    props: ['id'],
    data() {
      //这里存放数据
      return {
        background: 'http://dev.kingyin.club:9000/cloud/2022225/背景图片/1629775618356_bg10_1646715380151.jpg',
        searchLike: false,
        like: false,
        isLike: true,
        blogOp: true,
        txtc: ['text-warning', 'text-danger', 'text-success', 'text-pink', 'text-primary', 'text-info',
          'text-secondary'
        ],
        pretime: 1,
        document: {},
        user: {},
        buttom: {},
        rec: [],
        isRec: false
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      overflowHidForText(val, max = 42) {
        let textLength = val.length;
        let resultText = '';
        if (textLength > max) {
          resultText = val.slice(0, max) + '...'
        } else {
          resultText = val
        }
        return resultText
      },
      recommend() {
        this.isRec = false;
        this.get2Doc();
      },
      async get2Doc() {
        if (this.isRec) {
          return;
        }
        this.searchLike = true;
        this.isRec = true;
        var t = '';
        for (const tag of this.buttom.tags) {
          t = t + tag;
        }
        const pram = {
          id: this.document.id,
          title: this.document.title,
          slogan: this.document.slogan,
          tag: t
        }
        var res = await this.$api.search.recommend(pram)
        if (res.code == 20000) {
          this.rec = res.data;
        }
        this.searchLike = false;
      },
      async getTagAndCommentCount() {
        const pram = {
          id: this.id
        }
        var res = await this.$api.core.getTagsAndCount(pram)
        if (res.code == 20000) {
          this.buttom = res.data;
        }
      },
      btn_pos: function () {
        //滚动条的高度
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var clientHeight = document.body.clientHeight;
        //滚动条的高度>可视区的高度
        if (scrollTop / clientHeight > 0.3) {
          this.get2Doc();
          if (this.rec.length == 0) {
            this.isLike = false;
          } else this.like = true
        } else {
          this.like = false;
        }
      },
      preTime(data) {
        var time = Math.round(data.replace(/<[^<>]+>/g, "").length / 400);
        return time > 1 ? time : 1;
      },
      async getUserInfo() {
        const pram = {
          userid: this.document.userid
        }
        var res = await this.$api.article.getUser(pram);
        if (res.code == 20000) {
          this.user = res.data;
        }
      },
      async getDetail() {
        this.blogOp = true;
        const pram = {
          id: this.id
        }
        var res = await this.$api.message.push(pram);
        if (res.code == 20000) {
          if (res.data == null) {
            // this.message.timestamp = 1649419098170;
            this.message = {
              "id": -1,
              "data": "消息无效",
              "timestamp": 1649419098170,
              "objectid": 0,
              "userid": 2000221,
              "status": "READ",
              "avatar": "http://dev.kingyin.club:9000/cloud/2022225/头像/男头/1825950286_1646487281120.jpeg",
              "html": null,
              "type": "MESSAGE"
            }

          } else {
            this.message = res.data;
            // this.message.timestamp = this.$commons.dateStr(this.message.timestamp);
          }
          this.message.html = this.message.html == null ? null : this.decode(this.message.html);
          this.pretime = this.message.html == null ? 1 : this.preTime(this.message.html);

        }
        this.blogOp = false;

      },
      decode(val) {
        return Base64.decode(val)
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    async mounted() {
      await this.getDetail();
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>
  video::-webkit-media-controls-timeline {

    padding-left: 0px !important;

    padding-right: 0px !important;

  }

  pre code {
    max-height: 500px;
    overflow-x: none;
  }

  pre code span {
    white-space: nowrap;
    overflow: scroll;
  }

  .noy::-webkit-scrollbar {
    display: none;
    overflow: -Scroll;
    overflow-x: hidden
  }

  .video {
    width: 50%;
  }

</style>
